<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta charset="utf-8">
<title>后台首页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="${webroot}/static/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="${webroot}/static/css/public.css"
	media="all" />
<style type="text/css">
.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    border-width: 0 !important;
}
.goohs{
    color: #1AA094 !important;
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form">
	 <blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
		  <input type="hidden" id="startTime" name="startTime">
		  <input type="hidden" id="endTime" name="endTime">
		  <input type="hidden" id="complete" name="complete">
			<div class="layui-inline">
				<div class="layui-btn-group">
					<a class="layui-btn layui-btn-primary layui-btn-sm search_btn goohs" id="1">今天</a>
					<a class="layui-btn layui-btn-primary layui-btn-sm search_btn" id="2">本周</a>
					<a class="layui-btn layui-btn-primary layui-btn-sm search_btn" id="3">本月</a>
					<a class="layui-btn layui-btn-primary layui-btn-sm search_btn" id="4">全部</a>
				</div>
			</div>
			<div class="layui-inline" style="width:260px;">
				<div class="layui-input-inline" style="width: 70%;">
					<input type="text" class="layui-input" id="createTime" placeholder="2018-01-01 ~ 2018-01-05">
				</div> 
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">出借日期:</label>
				<div class="layui-input-inline" style="width: 105px;">
					<input type="text" class="layui-input" id="startDate"
								placeholder="开始日期" lay-key="3">
				</div>-
				<div class="layui-input-inline" style="width: 105px;">
					<input type="text" class="layui-input" id="endDate"
								placeholder="结束日期" lay-key="4">
				</div>
				    <a class="layui-btn search_btns" data-type="reload">查询</a>
					<a class="layui-btn layui-btn-primary reset" data-type="reload">重置</a>
			</div>
			<!-- <div class="layui-inline" style="width:260px;">
					
				<label class="layui-form-label">出借日期:</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="startTime"placeholder="开始日期" lay-key="1">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="endTime" placeholder="结束日期" lay-key="2">
				</div>
				<a class="layui-btn layui-btn-primary reset" data-type="reload">重置</a>
			</div> -->
		 </form>
		</blockquote>
		<div class="layui-table-body layui-table-main" style="height: 767px;">
		   <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
		      <tbody>
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">总统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">借款总额（<span id="sumMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">总借款人数（<span id="sumCount"></span>个）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">还款总额（<span id="hkSumMoney"></span>元）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
		 <!--        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
		           <td data-field="channelName" ><div id="sumMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="sumCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">未到期统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">未到期金额（<span id="wdqMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">未到期人数（<span id="wdqCount"></span>个）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/scale.png">未到期占比（<span id="wdqPercentum"></span>）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
	<!-- 	        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
		           <td data-field="channelName" ><div id="wdqMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="wdqCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="wdqPercentum" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0%</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">已结清统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">已结清金额（<span id="yjqMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">已结清人数（<span id="yjqCount"></span>个）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/scale.png">已结清占比（<span id="yjqPercentum"></span>）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
		   <!--      <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
                   <td data-field="channelName" ><div id="yjqMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="yjqCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="yjqPercentum" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0%</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">展期统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">展期手续费（<span id="zqMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">展期人数（<span id="zqCount"></span>个）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
		      <!--   <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
                   <td data-field="channelName" ><div id="zqMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="zqCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">逾期统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">逾期金额（<span id="yqMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">逾期人数（<span id="yqCount"></span>个）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/scale.png">逾期占比（<span id="yqPercentum"></span>）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
<!-- 		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
                   <td data-field="channelName" ><div id="yqMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="yqCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="yqPercentum" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0%</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">售后统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">售后金额（<span id="shMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">售后人数（<span id="shCount"></span>个）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/scale.png">售后占比（<span id="shPercentum"></span>）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
		  <!--       <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
                   <td data-field="channelName" ><div id="shMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="shCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="shPercentum" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0%</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">还款统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">还款金额（<span id="hkMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">还款人数（<span id="hkCount"></span>个）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
<!-- 		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
		           <td data-field="channelName" ><div id="hkMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="hkCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		        </tr> -->
		        <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName" style="font-size: 20px;font-weight: 600;">放款统计</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/moeny.png">放款金额（<span id="fkMoney"></span>元）</div></td>
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"><img src="${webroot}/static/images/numb.png">放款人数（<span id="fkCount"></span>个）</div></td>
		        </tr>
		        <tr data-index="0" class=""><td data-field="channelName" ></td></tr>
		<!--         <tr data-index="0" class="">
		           <td data-field="channelName" ><div class="layui-table-cell laytable-cell-1-channelName"></div></td>
		           <td data-field="channelName" ><div id="fkMoney" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		           <td data-field="channelName" ><div id="fkCount" class="layui-table-cell laytable-cell-1-channelName" style="margin-left: 30px;">0</div></td>
		        </tr> -->
		      </tbody>
		   </table>
		</div>
	</form>
	<script type="text/javascript" src="${webroot}/static/layui/layui.js"></script>
	<script src="${webroot}/static/js/jquery.min.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'layer', 'laydate', 'table', 'laytpl' ],
			function() {
				var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery, laydate = layui.laydate, laytpl = layui.laytpl, table = layui.table;
							laydate.render({
								elem : '#createTime',
								range : true,
								done: function(value, date, endDate){
									var month =""; var day ="";
									var month1 =""; var day1 ="";
									if(date.month < 10){
										month = "0"+date.month;
									}else{
										month = date.month;
									}
									if(date.date < 10){
										day = "0"+date.date;
									}else{
										day = date.date;
									}
									if(endDate.month < 10){
										month1 = "0"+endDate.month;
									}else{
										month1 = endDate.month;
									}
									if(endDate.date < 10){
										day1 = "0"+endDate.date;
									}else{
										day1 = endDate.date;
									}
									$("#startTime").val(date.year+"-"+month+"-"+day);
								    $("#endTime").val(endDate.year+"-"+month1+"-"+day1);
								    $("#complete").val("");
								    select();
								}
							});
							
							//开始日期
							var insStarts = laydate.render({
								elem : '#startDate',
							});

							//结束日期
							var insEnds = laydate.render({
								elem : '#endDate',
							});

							
	                        $(".reset").on("click", function() {
	                        	$("#createTime").val("");
	                        	$("#complete").val("");
							    $("#startDate").val("");
							    $("#endDate").val("");
	                        	select();
							});
					
							select(); 
							
							function select(){
							    $.post("/admin/system/queryhome",{
							    	startTime : $("#startTime").val(),
							    	endTime : $("#endTime").val(),
							    	complete : $("#complete").val(),
							    	startDate : $("#startDate").val(),
							    	endDate : $("#endDate").val()
				                },function(data){
				                  var res=JSON.parse(data);
				                  if(res != null && res !=""){
				                  var sumZqMoney=0; var sumTotalMoney=0; var sumTotalAccrual=0; 
				                  $("#yjqMoney").text(0);
								  $("#yjqCount").text(0);
								  $("#yjqPercentum").text("0%");
								  $("#wdqMoney").text(0);
								  $("#wdqCount").text(0);
								  $("#wdqPercentum").text("0%");
								  $("#yqMoney").text(0);
								  $("#yqCount").text(0);
							      $("#yqPercentum").text("0%");
								  $("#zqCount").text(0);
								  $("#shMoney").text(0);
								  $("#shCount").text(0);
								  $("#shPercentum").text("0%");
								  $("#hkMoney").text(0);
								  $("#hkCount").text(0);
								  $("#fkMoney").text(0);
								  $("#fkCount").text(0);
								  $("#sumMoney").text(0);
								  $("#sumCount").text(0);
								  $("#hkSumMoney").text(0);
								  
								  $("#sumMoney").text(res.sumMoney == null ? 0 : res.sumMoney);
								  $("#sumCount").text(res.sumCount == null ? 0 : res.sumCount);
								  
								  $("#yjqMoney").text(res.yjqMoney+res.yjqAccrual == null ? 0 : res.yjqMoney+res.yjqAccrual);
								  $("#yjqCount").text(res.yjqCount == null ? 0 : res.yjqCount);
								  $("#yjqPercentum").text(res.yjqPercentum == null ? 0+"%" : res.yjqPercentum+"%");
								  
								  $("#wdqMoney").text(res.wdqMoney == null ? 0 : res.wdqMoney);
								  $("#wdqCount").text(res.wdqCount == null ? 0 : res.wdqCount);
								  $("#wdqPercentum").text(res.wdqPercentum == null ? 0+"%" : res.wdqPercentum+"%");
								  
								  $("#yqMoney").text(res.yqMoney  == null ? 0 : res.yqMoney);
								  $("#yqCount").text(res.yqCount  == null ? 0 : res.yqCount);
								  $("#yqPercentum").text(res.yqPercentum == null ? 0+"%" : res.yqPercentum+"%");
								  
								  $("#zqMoney").text(res.zqSale == null ? 0 : res.zqSale);
				                  $("#zqCount").text(res.zqNum  == null ? 0 : res.zqNum);
				                  
				                  $("#shMoney").text(res.shMoney == null ? 0 : res.shMoney);
								  $("#shCount").text(res.shNum == null ? 0 : res.shNum);
								  $("#shPercentum").text(res.percentum == null ? 0+"%" : res.percentum+"%");

								  $("#hkMoney").text(res.hkTotalAccrual == null ? 0 : res.hkTotalAccrual);
								  $("#hkCount").text(res.hkCount  == null ? 0 : res.hkCount);
							      $("#fkMoney").text(res.fkTotalMoney == null ? 0 : res.fkTotalMoney);
								  $("#fkCount").text(res.sumCount == null ? 0 : res.sumCount);
								  
								  $("#hkSumMoney").text(res.hkTotalMoney == null ? 0 : res.hkTotalMoney);
								  
				                  $("#startTime").val("");
							      $("#endTime").val("");
				                  }
				                })
							};
							
							$(".search_btns").on("click", function() {
								$("#complete").val("complete");
							    $("#startTime").val("");
							    $("#endTime").val("");
							    select();
							})
					
							//$("#createTime").val("2018-10-01 - 2018-10-05");
							

							//搜索【此功能需要后台配合，所以暂时没有动态效果演示】
							$(".search_btn").on("click", function() {
								$("#createTime").val("");
								if($(this).attr("id") == '1'){
									$("#complete").val("");
									$("#1").removeClass("goohs");
									$("#2").removeClass("goohs");
									$("#3").removeClass("goohs");
									$("#4").removeClass("goohs");
									$("#1").addClass("goohs");
									getIntradayDate();
									select();
								}else if($(this).attr("id") == '2'){
									$("#complete").val("");
									$("#1").removeClass("goohs");
									$("#2").removeClass("goohs");
									$("#3").removeClass("goohs");
									$("#4").removeClass("goohs");
									$("#2").addClass("goohs");
									getWeekStartDate();
									getWeekEndDate();
									select();
								}else if($(this).attr("id") == '3'){
									$("#complete").val("");
									$("#1").removeClass("goohs");
									$("#2").removeClass("goohs");
									$("#3").removeClass("goohs");
									$("#4").removeClass("goohs");
									$("#3").addClass("goohs");
									getMonthStartDate();
									getMonthEndDate();
									select();
								}else if($(this).attr("id") == '4'){
									$("#1").removeClass("goohs");
									$("#2").removeClass("goohs");
									$("#3").removeClass("goohs");
									$("#4").removeClass("goohs");
									$("#4").addClass("goohs");
									$("#complete").val("complete");
									select();
								}
							});
							
							var now = new Date(); //当前日期
							var nowDayOfWeek = now.getDay(); //今天本周的第几天
							var nowDay = now.getDate(); //当前日
							var nowMonth = now.getMonth(); //当前月
							var nowYear = now.getYear(); //当前年
							nowYear += (nowYear < 2000) ? 1900 : 0; //
							var lastMonthDate = new Date(); //上月日期
							lastMonthDate.setDate(1);
							lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
							var lastYear = lastMonthDate.getYear();
							var lastMonth = lastMonthDate.getMonth();
							//格式化日期：yyyy-MM-dd
							function formatDate(date) {
							    var myyear = date.getFullYear();
							    var mymonth = date.getMonth() + 1;
							    var myweekday = date.getDate();
							    if (mymonth < 10) {
							        mymonth = "0" + mymonth;
							    }
							    if (myweekday < 10) {
							        myweekday = "0" + myweekday;
							    }
							    return (myyear + "-" + mymonth + "-" + myweekday);
							}
							
							function getMonthDays(myMonth) {
							    var monthStartDate = new Date(nowYear, myMonth, 1);
							    var monthEndDate = new Date(nowYear, myMonth + 1, 1);
							    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
							    return days;
							}
							//获得本周的开始日期
							function getWeekStartDate() {
							    var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
							    $("#startTime").val(formatDate(weekStartDate));
							}
							//获得本周的结束日期
							function getWeekEndDate() {
							    var weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek));
							    $("#endTime").val(formatDate(weekEndDate))
							}
						
							//获得本月的开始日期
							function getMonthStartDate() {
							    var monthStartDate = new Date(nowYear, nowMonth, 1);
							    $("#startTime").val(formatDate(monthStartDate));
							}
							//获得本月的结束日期
							function getMonthEndDate() {
							    var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth));
							    $("#endTime").val(formatDate(monthEndDate));
							}
							
							//获得当天日期
							function getIntradayDate() {
							    var weekEndDate = new Date(nowYear, nowMonth, nowDay);
							    $("#startTime").val(formatDate(weekEndDate));
							    $("#endTime").val(formatDate(weekEndDate));
							}
						})
	</script>
</body>
</html>